<template>
  <van-popup
    v-model="showScholarPopup"
    :close-on-click-overlay="false"
    :class="{'move-to-scholar': closePopup}"
  >
    <img
      src="~assets/home/scholar_bg.png"
      class="scholar-bg"
    >
    <div class="scholar-box">
      <div class="top-prompt">
        进入奖学金模块，注册分享获得
      </div>
      <!-- <div class="prompt-get">

      </div> -->
      <div class="scholar-amount">
        {{ $store.state.instInfo.Scholarship }}
        <div class="prompt-scholar">
          奖学金
        </div>
      </div>
      <div
        class="scholar-btn"
        @click="onReceiveScholar"
      >
        立即领取
      </div>
    </div>
    <img
      src="~assets/home/close.png"
      class="close-btn"
      @click="onHidePopup"
    >
  </van-popup>
</template>
<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
  data () {
    const closePopup = !!localStorage.getItem('closePopup')
    return {
      showScholarPopup: false,
      closePopup: closePopup || false,
    }
  },
  created () {
    const state = this.$store.state

    if (state.instInfo.IsScholarInst && (state.userInfo.UserId === '-1' ||
    !state.userInfo.receivedScholarship) && !this.closePopup) {
      this.showScholarPopup = true
    }

    // if (state.instInfo.IsScholarInst && state.userInfo.UserId === '-1' && (
    //   state.route.from.name === 'shareOutPage' || !state.userInfo.receivedScholarship) &&
    //    !this.closePopup) {
    //   this.showScholarPopup = true
    // }
  },
  methods: {
    // 隐藏弹窗
    onHidePopup () {
      this.closePopup = true
      localStorage.setItem('closePopup', 'true')
      this.showScholarPopup = false
    },
    // 点击立即领取按钮
    onReceiveScholar () {
      sessionStorage.setItem('loginFromPage', JSON.stringify({ from: 'scholarShip' }))
      if (this.$store.state.userInfo.UserId === '-1') {
        this.$router.push({ name: 'register' })
      } else {
        this.$router.push({ name: 'receiveSS' })
      }
      this.showScholarPopup = false
    },
  },
})
</script>
<style lang="scss" scoped>
.van-popup {
  overflow-x: hidden;
  margin-left: -16px;
  padding-left: 16px;
  background-color: initial;
}
.scholar-bg {
  width: 683px;
  height: 674px;
  position: absolute;
  margin-left: -8px;
}
.scholar-box {
  position: relative;
  width: 683px;
  height: 764px;
  text-align: center;
}
.top-prompt {
  position: absolute;
  top: 272px;
  left: calc(50% + 8px);
  width: 100%;
  color: #FFDC98;
  font-size: 26px;
  transform: translate(-50%);
}
.prompt-get {
  position: absolute;
  top: 336px;
  left: 150px;
  width: 46px;
  color: #FFDC98;
  font-size: 46px;
}
.prompt-scholar {
  // position: absolute;
  // top: 328px;
  // right: 134px;
  // width: 36px;
  letter-spacing: 0px;
  font-weight: 400;
  color: #FFDC98;
  font-size: 32px;
  margin-top: 10px;
}
.scholar-amount {
  position: absolute;
  top: 305px;
  left: 50%;
  color: #FFDC98;
  font-size: 140px;
  font-weight:750;
  letter-spacing: -10px;
  transform: translate(-50%);
  text-shadow:0px 2px 10px rgba(115,7,7,0.8);
}
.scholar-btn {
  width: 448px;
  height: 113px;
  line-height: 107px;
  text-align: center;
  font-size: 48px;
  color: #F80000;
  letter-spacing: 5px;
  position: absolute;
  bottom: 133px;
  left: calc(50% + 8px);
  transform: translate(-50%);
  // left: 129px;
  background: url("~assets/home/scholar_btn.png") no-repeat;
  background-size: 100% 100%;
}
.close-btn {
  position: absolute;
  top: 674px;
  width: 60px;
  height: 60px;
  margin-top: 30px;
  left: calc(50% + 8px);
  transform: translate(-50%);
}
// 移动至奖学金入口
// .move-to-scholar {
//   animation: move-to-scholar 1s infinite;
//   will-change: transform;
// }
// @keyframes move-to-scholar {
//   0% {
//     // transform: translate(-350px, -400px) scale(1);
//     transform: translate(-50%, -50%) scale(1);
//   }
//   100% {
//     // transform: translate(-50px, -700px) scale(0);
//     transform: translate(-8%, calc(-100%)) scale(0);
//   }
// }
</style>
